<template>
    <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
    </div>
    <div style="background-image: url(/image/shop/lun.png);height: 200px;width: 100%">
    <div class="shop-detail">
        <!-- 店铺头部信息 -->
        <div class="shop-header">
            <div class="shop-info">
                <h1 class="shop-name"><el-icon><Dish /></el-icon>{{ shop.shopName }}</h1>
<!--                <p class="shop-description">{{ shop.id }}</p>-->
                <p class="shop-address"><el-icon><Location /></el-icon>{{ shop.address }}</p>
            </div>
        </div>
    </div>
        <!-- 商品列表 -->
        <div class="product-list">
            <h2 class="product-list-title">商品</h2>
            <div class="product-cards">
                <div class="product-card" v-for="product in products" :key="product.id">
                    <el-image :src="baseUrl+product.productImg" alt="菜谱图片" class="product-image"></el-image>
<!--                    <img :src="product.product_img" :alt="product.productName" class="product-image" />-->
                    <div class="product-details" @click="navigateToProductDetails(product.productId)">
                        <h3 class="product-title">{{ product.productName }}</h3>
                        <p class="product-description">{{ product.description }}</p>
                        <p class="product-price">价格: ￥{{ product.price }}</p>
                        <p class="product-sales">月销: 100</p>

                        <el-button type="primary" @click="addToCart(product.productId)">加入购物车</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import router from "@/router";
import { ElMessage } from "element-plus";
import qs from "qs";

const baseUrl = getBaseUrl();
// 获取路由参数
var urlParams = new URLSearchParams(window.location.search);
var shopId = urlParams.get('id');

// 店铺信息
const shop = ref({
    // logo: '/image/login/shop/logo.png',
    name: '精品肉店',
    description: '美味，健康肉类',
    products: [
        {
            id: 1,
            product_name: '猪肉',
            product_img: '/image/shop/product1.png',
            price: 20,
            sales: 100
        },
        {
            id: 2,
            product_name: '牛肉',
            product_img: '/image/shop/product2.png',
            price: 30,
            sales: 50
        },
    ],
//     地址
    address: '北京市朝阳区芍药居',
    phone: '123-456-7890',
});

// 商品列表
const products = ref([
    {
        id: 1,
        product_name: '猪肉',
        product_img: '/image/shop/product1.png',
        price: 20,
        sales: 100
    },
    {
        id: 2,
        product_name: '牛肉',
        product_img: '/image/shop/product2.png',
        price: 30,
        sales: 50
    },
    {
        id: 3,
        product_name: '羊肉',
        product_img: '/image/shop/product3.png',
        price: 40,
        sales: 80
    },
    {
        id: 4,
        product_name: '鸡腿',
        product_img: '/image/shop/chicken.png',
        price: 50,
        sales: 60
    },
]);


// 加载店铺信息
const fetchShopDetails = () => {
    axios.get(BASE_URL + '/v1/shop/select/'+shopId)
        .then((response) => {
            if (response.data.code === 2000) {
                shop.value = response.data.data;
                products.value=response.data.data.productList;
            } else {
                ElMessage.error(response.data.msg);
            }
        });
};



// 初始化加载数据
onMounted(() => {
    fetchShopDetails();
});
const user = ref(getUser());

// 加入购物车
const addToCart = (productId) => {
    console.log("商品id",productId);
    console.log("用户id",user);
    let data1 = {
        userId: user.value.id,
        shopId: shopId,
        productId: productId,
        quantity: 1,
    };
    let data = qs.stringify(data1);
    // console.log("购物车", data);
    axios.post(BASE_URL + "/v1/cart/addProducts/", data)
        .then((response) => {
            if (response.data.code === 2000) {
                ElMessage.success('添加成功');
                // router.push('/cart');
            } else {
                ElMessage.error(response.data.msg);
            }
        });
};

//定义方法用于跳转商品详情,此处id为商品id
const navigateToProductDetails=(id)=>{

  //跳转到对应的商品详情页
  router.push('/product?id='+id);
}
//返回商品详情页
const goBack = () => {
    router.go(-1);
};
</script>

<style scoped>/* 店铺详情页面样式 */
.shop-detail {
    padding: 20px;
}

/* 店铺头部信息样式 */
.shop-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.shop-logo {
    margin-right: 20px;
}

.shop-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.shop-info {
    max-width: 500px;
}

.shop-name {
    font-size: 24px;
    margin-bottom: 10px;
}

.shop-description {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

.shop-address {
    font-size: 14px;
    color: #999;
}

/* 商品列表样式 */
.product-list {
    margin-bottom: 20px;
}

.product-list-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.product-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-card {
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 15px;
    width: calc(20% - 20px); /* 三列布局，每列宽度减去间距 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
/*   动态 缩放*/
    &:hover {
        transform: scale(1.06);
    }
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.product-details {
    text-align: center;
}

.product-title {
    font-size: 18px;
    margin-bottom: 5px;
}

.product-price {
    font-size: 16px;
    color: #ff5722;
    margin-bottom: 5px;
}

.product-sales {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
